<script setup>
	import {
		addRelationApi,
		delRelationApi,
	} from '@/assets/api/tarbar/people.js'
	import {
		navigateToMemorialHall,
	} from "@/assets/scripts/navigate.js"
	const props = defineProps(['data'])
	// console.log(props.data.src);

	const handleFocus = async () => {
		if (props.data.relationObj) {
			const res = await delRelationApi(props.data.relationObj.id)
			if (res.code === 200) {
				uni.showToast({
					title: '取消成功',
					icon: 'success',
					complete: () => {
						props.data.relationObj = null
						props.data.isFocusOnNum = parseInt(props.data.isFocusOnNum) - 1
					}
				})
			} else {
				uni.showToast({
					title: '取消失败',
					icon: 'error',
				})
			}
		} else {
			const res = await addRelationApi({
				meMemorialId: props.data.id,
				relation: '关注',
			})
			if (res.code === 200) {
				uni.showToast({
					title: '关注成功',
					icon: 'success',
					complete: () => {
						props.data.relationObj = res.data
						props.data.isFocusOnNum = parseInt(props.data.isFocusOnNum) + 1
					}
				})
			} else {
				uni.showToast({
					title: '关注失败',
					icon: 'error',
				})
			}
		}

	}
</script>

<template>
	<view class="item p-normal d-flex">
		<view class="p-small mr-normal avatar d-flex-fs0">
			<image :src="props.data.mmImg1" mode="scaleToFill" class="image image-fill"></image>
		</view>
		<view class="d-flex-fx1">
			<view class="d-flex d-flex-jcsb">
				<view class="mr-small name">{{props.data.mmName1}}</view>
				<uni-icons type="star-filled" size="22" @click="handleFocus()"
					:color="props.data.relationObj?'#fd3f4e':'#999999'"></uni-icons>
			</view>
			<view class="d-flex d-flex-aic mt-small date">
				<view class="mr-small">
					生卒:
				</view>
				<view class="mr-small">
					<span class="lunar" v-if="props.data.mmDate1==='time_type_private'">农</span>
					<span class="gregorian" v-else>公</span>
				</view>
				<view>
					<span>{{props.data.mmBorn1}}</span>
					<span>至</span>
					<span>{{props.data.mmPassAwayDate1}}</span>
				</view>
			</view>
			<view class="d-flex d-flex-aic mt-small text-ellipsis-1">
				{{props.data.mmName1}}({{props.data.desc}})
			</view>
			<view class="d-flex d-flex-aic d-flex-jcsb mt-small statistics">
				<view class="d-flex">
					<view>已祭拜</view>
					<view class="num">{{props.data.isFocusOnNum}}</view>
					<view>次</view>
				</view>
				<uv-button text="去祭拜" icon="home" type="success" iconColor="#fff"
					:customStyle="{height:'28px',padding:'6px'}"
					@click="navigateToMemorialHall(props.data.id)"></uv-button>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.item {
		background-color: #fff;

		.avatar {
			background-color: #fff;
			border: 1px solid #000;
			width: 75px;
			height: 100px;
		}

		.name {
			font-size: 18px;
		}

		.date {
			font-size: 12px;
			color: #888888;

			.lunar,
			.gregorian {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: 1px solid #000;
				color: #fff;
				font-size: 12px;

				&.lunar {
					background-color: #cb8112;
				}

				&.gregorian {
					background-color: #4e6ef2;
				}
			}
		}

		.statistics {
			color: #666666;

			.num {
				color: #fd3f98;
			}
		}

	}
</style>